<template>
	<view>
		<uni-calendar :date="selectedDateString" :selected="scheduledWithRedPoint" :show-month="false"
			@change="handleCalendarChange" @month-switch="handleCalendarMonthSwitch">
		</uni-calendar>
		<up-card :title="selectedDateString">
			<template #body>
				<up-steps v-if="sortedScheduleDetails !== undefined && sortedScheduleDetails.length > 0"
					direction="column" dot>
					<up-steps-item v-for="scheduleDetail in sortedScheduleDetails"
						:desc="checkType(scheduleDetail.plan_type)" :icon-size="30" :title="scheduleDetail.plan_time" />
				</up-steps>
				<up-empty v-else />
			</template>
		</up-card>
	</view>
</template>

<script lang="ts" setup>
	import { computed, ref } from "vue"
	import { getCurrentUsersSchedules } from "@/api/scuedule";
	import { onPullDownRefresh } from "@dcloudio/uni-app";
	import type ScheduleListItem from "@/api/types/schedule/ScheduleListItem";
	import type CheckType from "@/api/types/schedule/CheckType";
	import { translateCheckType } from "@/api/types/schedule/translate";

	const today = new Date()
	// 当前选中的日期
	const selectedDate = ref<{ year : number, month : number, day : number }>({
		year: today.getFullYear(),
		month: today.getMonth() + 1,
		day: today.getDate()
	})
	// 当前选中的月
	const selectedYearAndMonth = ref<{ year : number, month : number }>({
		year: today.getFullYear(),
		month: today.getMonth() + 1,
	})
	// 日期组件需要的日期格式，用`YYYY-mm-dd`表示
	const selectedDateString = computed(() => `${selectedDate.value.year}-${String(selectedDate.value.month).padStart(2, "0")}-${String(selectedDate.value.day).padStart(2, "0")}`)
	// 向后端查询需要的月格式，用`YYYY-mm`表示
	const selectedYearAndMonthString = computed(() => `${selectedYearAndMonth.value.year}-${String(selectedYearAndMonth.value.month).padStart(2, "0")}`)

	const schedules = ref([])

	// 需要显示红点的日期
	// const scheduledWithRedPoint = computed(() => schedules.value.filter(value => {
	// 	if (value.schedule_detail !== undefined) {
	// 		return value.schedule_detail.length > 0
	// 	}
	// }
	// ).map(value => ({
	// 	date: value.day,
	// 	type: 1
	// })))
	// { date: '2025-02-09', type: 1 },
	// 		{ date: '2025-02-06', type: 2 },
	// 		{ date: '2025-02-12', type: 3 }

	// 需要显示红点的日期
	const scheduledWithRedPoint = computed(() => {
		let detes = []
		schedules.value.forEach((item) => {
			if (item.day_status[0] == "缺卡" || item.day_status[1] == "缺卡") {
				detes.push({ date: item.day, type: 1 })
			} else if (item.day_status[0] == "迟到" || item.day_status[1] == "迟到" || item.day_status[0] == "早退" || item.day_status[1] == "早退") {
				detes.push({ date: item.day, type: 2 })
			} else if (item.day_status[0] == "正常" || item.day_status[1] == "正常") {
				detes.push({ date: item.day, type: 3 })
			} else {
				detes.push({ date: item.day, type: 0 })
			}
		})
		return detes
	})

	function checkType(checkType ?: CheckType) {
		// console.log(checkType)
		if (checkType !== undefined) {
			return translateCheckType(checkType)
		}
	}

	async function getData() {
		const { data } = await getCurrentUsersSchedules(selectedYearAndMonthString.value)
		// console.log("------------")
		// console.log(data.data[0].attendanceRecord)
		if (data.data[0].attendanceRecord !== undefined) {
			schedules.value = data.data[0].attendanceRecord

		}
	}

	const todaySchedule = computed(() => {
		return schedules.value.find((value) => {
			return value.day === selectedDateString.value
		})
	})

	const sortedScheduleDetails = computed(() => {
		return todaySchedule.value?.day_check_status?.sort((a : any, b : any) => {
			// console.log(todaySchedule.value)
			// console.log(a)
			// console.log(b)
			if (a.number !== undefined && b.number !== undefined) {
				return a.number < b.number ? -1 : 1
			} else {
				return 0
			}
		})
	})

	getData()

	function handleCalendarChange({ year, month, date } : { year : number, month : number, date : number }) {
		selectedDate.value.year = year
		selectedDate.value.month = Number(month)
		selectedDate.value.day = date
	}

	async function handleCalendarMonthSwitch({ year, month } : { year : number, month : number }) {
		selectedYearAndMonth.value.year = year
		selectedYearAndMonth.value.month = month
		await getData()
	}

	onPullDownRefresh(async () => {
		await getData()
		uni.stopPullDownRefresh()
	})
</script>